<template>
  <view class="pupop">
    <view class="popup-box" :animation="animationData">
      <view class="pupop-btn">
        <view @tap="cancel">取消</view>
        <view @tap="confirm" style="color: #2979ff">确定</view>
      </view>
      <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
        <picker-view-column>
          <view class="item" v-for="(item, index) in provinceList" :key="index"
            :class="index == value[0] ? 'itemActive' : ''">{{ item.departName }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index2) in cityList" :key="index2"
            :class="index2 == value[1] ? 'itemActive' : ''">{{ item.departName }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index3) in areaList" :key="index3"
            :class="index3 == value[2] ? 'itemActive' : ''">{{ item.departName }}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
  </view>
</template>

<script>
  import {
    getAction
  } from "@/utils/request.js";
  // 地址：https://ext.dcloud.net.cn/plugin?id=7065
  export default {
    data() {
      return {
        value: [0, 0, 0],
        provinceList: [],
        cityList: [],
        areaList: [],
        indicatorStyle: `height: 50px;`,
        provinceIndex: 0,
        cityIndex: 0,
        areaIndex: 0,
        animationData: {},

        cityName: [],
      };
    },
    props: {
      addressList: {
        type: Array,
        default: () => [],
      },
      // 初始地区编码（例:420102）
      defaultValue: {
        type: String,
        default: () => "",
      },
      // 控制选择器显示和隐藏
      visible: {
        type: Boolean,
        default: () => false,
      },
      // 点击模态框是否关闭弹框
      maskCloseAble: {
        type: Boolean,
        default: () => true,
      },
    },
    watch: {
      visible(val) {
        this.changeActive();
      },
    },
    async created() {
      this.changeActive();
      await this.get_area_list(0, "provinceList");
      await this.get_area_list(this.provinceList[0].id, "cityList");
      await this.get_area_list(this.cityList[0].id, "areaList");
    },
    methods: {
      confirm() {
        let address = this.getAddress(...this.value);
        let code = this.areaList[this.areaIndex].nationCode;
        this.$emit("confirm", {
          code,
          address,
        });
      },
      cancel() {
        this.$emit("cancel");
      },
      getAddress(p, c, a) {
        const {
          provinceList = [], cityList = [], areaList = []
        } = this;
        return (
          provinceList[p].departName +
          cityList[c].departName +
          areaList[a].departName
        );
      },

      async get_area_list(areaId = 0, targetList) {
        const {
          result
        } = await getAction("/app/common/area/subsetList", {
          areaId,
        });
        this[targetList] = result;
      },

      // 动画
      changeActive() {
        var active = "-315px";
        if (this.visible) {
          active = 0;
        }
        var animation = uni.createAnimation({
          duration: 400,
          timingFunction: "linear",
        });
        animation.bottom(active).step();
        this.animationData = animation.export();
      },

      bindChange(e) {
        e.detail.value[0] = e.detail.value[0] || 0;
        e.detail.value[1] = e.detail.value[1] || 0;
        e.detail.value[2] = e.detail.value[2] || 0;
        if (e.detail.value[0] != this.provinceIndex) {
          // console.log('监听第一列')
          this.provinceChange(e.detail.value[0]);
        } else if (e.detail.value[1] != this.cityIndex) {
          // console.log('监听第二列')
          this.cityChange(e.detail.value[1]);
        } else if (e.detail.value[2] != this.areaIndex) {
          // console.log('监听第三列')
          this.areaChange(e.detail.value[2]);
        }
      },
      // 监听第一列变化
      async provinceChange(e) {
        this.provinceIndex = e;
        this.cityIndex = 0;
        this.areaIndex = 0;
        this.value = [...[e, 0, 0]];
        this.cityList = [];
        this.areaList = [];
        await this.get_area_list(this.provinceList[e].id, "cityList");
        await this.get_area_list(this.cityList[0].id, "areaList");
      },

      // 监听第二列变化
      async cityChange(e) {
        this.cityIndex = e;
        this.areaIndex = 0;
        this.value = [...[this.provinceIndex, e, 0]];
        await this.get_area_list(this.cityList[e].id, "areaList");
      },

      // 监听第三列变化
      areaChange(e) {
        this.areaIndex = e;
        this.value = [...[this.provinceIndex, this.cityIndex, e]];
      },

      // 点击模态框
      close() {
        if (this.maskCloseAble) {
          this.cancel();
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .pupop {
    .popup-box {
      position: fixed;
      left: 0;
      bottom: -315px;
      z-index: 99999;
      background: #fff;
      padding-bottom: 50px;

      .pupop-btn {
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 30upx;
        justify-content: space-between;
        font-size: 30rpx;
      }
    }

    .pupop-model {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.5);
    }

    .pupop-models {
      display: none;
    }

    .picker-view {
      width: 750rpx;
      height: 225px;
      margin-top: 20rpx;
    }

    .item {
      height: 50px;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 50px;
      font-size: 32rpx;
    }

    .itemActive {
      align-items: center;
      justify-content: center;
      text-align: center;
      display: block;
      font-weight: 700;
    }
  }
</style>